<template>
  <h3>组合api-computed</h3>
  <p>count: {{ count }} - <button @click="fn">btn</button></p>
  <p>doubleCount: {{ doubleCount }}</p>

  <hr />

  <p>{{ oddArr }}</p>
</template>

<script>
// 计算属性computed现在也是一个函数，也要从vue里面解构
import { ref, computed } from "vue";

export default {
  setup() {
    const count = ref(1);
    // 执行的时候也需要return
    // 返回的内容就是计算属性的变量
    // 可以调用多次
    const doubleCount = computed(() => {
      return count.value * 2;
    });
    const fn = () => {
      count.value++;
    };

    const arr = ref([1, 2, 3, 4, 5, 6, 7]);
    const oddArr = computed(() => arr.value.filter((item) => item % 2));

    return {
      count,
      doubleCount,
      fn,
      oddArr,
    };
  },
};
</script>
